<template>
  <div class="home">
    <div id="cesiumContainer"></div>
    <div class="btn-toolbar">
      <div id="toolbar" class="toolbar">
        <a
          id="btn-layer-manager"
          class="btn btn-inverse"
          data-toggle="dropdown"
          title="图层列表"
          aria-expanded="true"
          @click="addLayer"
        >
          <span class="iconfont icon-layer" style="font-size: 16px"></span>
          <div
            class="dropdown-container dropdown-visiable"
            id="layer-manager-dropdown"
            style="min-width: 260px; text-align: left; padding: 8px"
            v-if="isVisiable"
          >
            <div id="layerTree" class="treeview">
              <el-tree :data="treeData" :props="treeProps" node-key="id" draggable show-checkbox> </el-tree>
            </div>
          </div>
        </a>
        <a class="btn btn-inverse" style="padding: 10px 0px">
          <span style="border-left: 1px solid #dddddd"></span>
        </a>
        <a id="btn-expand" class="btn btn-inverse" v-if="isBtnGroupExpand" title="展开" @click="fold">
          <span class="iconfont icon-toolbar_expand"></span>
        </a>
        <div id="btn-group" class="btn-group" v-if="!isBtnGroupExpand">
          <a id="btn-add-layer" class="btn btn-inverse" title="添加图层" aria-expanded="false">
            <span class="iconfont icon-toolbar-add_layer"></span>
          </a>
          <a data-toggle="dropdown" id="btn-base-layer" class="btn btn-inverse" title="底图" aria-expanded="false">
            <span class="iconfont icon-earth"></span>
          </a>
          <a data-toggle="dropdown" id="btn-setting" class="btn btn-inverse" title="场景">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding: 10px 0px">
            <span style="border-left: 1px solid #dddddd"></span>
          </a>
          <a data-toggle="dropdown" id="btn-clip" class="btn btn-inverse" title="裁剪">
            <span class="iconfont icon-toolbar-clip"></span>
          </a>
          <a data-toggle="dropdown" id="btn-terrain" class="btn btn-inverse" title="地形">
            <span class="iconfont icon-toolbar-terrain"></span>
          </a>
          <a data-toggle="dropdown" id="btn-analysis" class="btn btn-inverse" title="三维分析">
            <span class="iconfont icon-toolbar-analysis"></span>
          </a>
          <a data-toggle="dropdown" id="btn-measure" class="btn btn-inverse" title="量算">
            <span class="iconfont icon-toolbar-setting"></span>
          </a>
          <a class="btn btn-inverse" style="padding: 10px 0px">
            <span style="border-left: 1px solid #dddddd"></span>
          </a>
          <a id="btn-edit" class="btn btn-inverse" title="编辑">
            <span class="iconfont icon-toolbar-online-edit"></span>
          </a>
          <a id="btn-fold" class="btn btn-inverse" title="收起" @click="fold">
            <span class="iconfont icon-toolbar-fold"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="compass">
      <a id="btn-compass" class="btn btn-inverse" title="罗盘" style="width: 32px; height: 32px; padding: 5px 8px">
        <span class="iconfont icon-toolbar-fold"></span>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  props: {
    msg: String
  },
  mounted() {
    /* eslint-disable */
    var viewer = new Cesium.Viewer('cesiumContainer', {
      cesiumLogo: false,
      // terrainProvider: new Cesium.CesiumTerrainProvider({
      //   url: 'http://www.supermapol.com/realspace/services/3D-dxyx_ios2/rest/realspace/datas/DatasetDEM_1@sichuanTer',
      //   isSct: true //地形服务源自SuperMap iServer发布时需设置isSct为true
      // }),
      sceneModePicker: true, // 打开场景模式按钮
      navigation: false // 关闭导航插件
    });

    viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
            url: 'https://dev.virtualearth.net',
            mapStyle: Cesium.BingMapsStyle.AERIAL,
            key: 'AjZQFTIC1djVRAMMYgiekFSPjfqT_8qCjMrOhKQMEzOsUd-_zjIPEJbcm2vO2Xec'
    }));
    // viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;//平面场景
    var scene = viewer.scene;
    var promise = scene.open('http://localhost:8090/iserver/services/3D-CBD/rest/realspace');

    viewer._cesiumWidget._creditContainer.style.display = 'none'
    //添加基础拖放功能
    viewer.extend(Cesium.viewerDragDropMixin)
    //处理删除文件时遇到错误，显示弹出式警告。
    viewer.dropError.addEventListener(function (dropHandler, name, error) {
      console.log(error, 'error')
      window.alert(error)
    })
    /* eslint-enable */
  },
  data() {
    return {
      isVisiable: false,
      isBtnGroupExpand: false,
      treeData: [
        {
          id: 1,
          label: '图层目录',
          children: [
            {
              id: 2,
              label: 'DEM图层'
            },
            {
              id: 3,
              label: 'S3M图层'
            }
          ]
        }
      ],
      treeProps: [
        {
          children: 'children',
          label: 'label'
        }
      ]
    }
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    addLayer() {
      // 1.弹出dialog测试
      // alert('click ok')
      this.isVisiable = !this.isVisiable
    },
    fold() {
      this.isBtnGroupExpand = !this.isBtnGroupExpand
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  padding: 0;
}
#cesiumContainer {
  position: relative;
  // height: 762px;
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  font-size: 10pt;
  background: #000;
  color: #eee;
}

.btn-toolbar {
  position: absolute;
  left: 10px;
  top: 45px;
  margin-left: -5px;
  z-index: 1;
}

.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: none;
}

.btn:hover {
  outline: 1px;
  border-color: #c0baba;
  background-color: #2c3e50;
}

.btn-inverse {
  color: rgb(137, 243, 234);
  // border: 1px red solid;
  vertical-align: middle;
}

.btn-inverse:hover {
  background-color: #2c3e50;
  color: #fff;
}

.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

#toolbar {
  // position: relative;
  // top: 35px;
  margin: 5px 5px 5px 8px;
}

#toolbar a {
  padding: 10px 12px;
  background-color: rgba(38, 38, 38, 0.75);
}

#toolbar a:hover {
  cursor: pointer;
}

#toolbar .btn-inverse:hover {
  outline: 1px;
  border-color: #c0baba;
  background-color: #2c3e50;
}

// 设置底图
#btn-base-layer > .drop-down-container {
  padding: 5px 10px;
}

.dropdown-container {
  display: block;
  position: absolute;
  top: 100%;
  box-sizing: border-box;
  left: 0;
  border: 1px solid #526f82;
  margin: 9px;
  color: white;
  background-color: rgba(38, 38, 38, 0.75);
}

.compass {
  position: absolute;
  right: 10px;
  top: 150px;
}
</style>
